<template>
    <view class="integral">
        <!-- <image src='@/static/img/inte-bg.png' mode=""></image> -->
        <view class="search_top_back">
            <view class="search_top_nav">
                <view :style="{ height: statusBarHeight }" class="status_bar"></view>
                <view class="search_nav_content">
                    <image
                        style="width: 10px; height: 18px; margin-left: 15px"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/goback.png"
                        @click="goBack"
                    >
                    </image>
                    <label class="search_title">健康报告</label>
                </view>
            </view>
            <View class="report_title">
                <View class="report_left">
                    <label class="label_left">当前体重（公斤）</label>
                    <label class="status_text">{{ list.bodyLevel || "未知" }}</label>
                </View>
                <View class="report_right" @click="onChangeShow(true)">
                    <img
                        class="change"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/change.png"
                    /><label class="label_right">分享</label>
                </View>
            </View>
            <View class="wightNum">
                <label>{{ list.weight }}</label>
            </View>
        </view>
        <View class="weightCom">
            <View class="weightCenter">
                <View class="lines"> </View>
                <View class="heightFirst">
                    <View class="heightFirst_left">
                        <label class="textNum">身体得分：</label>
                        <label class="textSix">{{ list.score }}</label>
                        <label class="textChnage">分</label>
                    </View>
                    <View>
                        <label
                            :class="
                                list.fatLevel === '不足'
                                    ? 'buzu'
                                    : list.fatLevel === '优秀'
                                    ? 'youxiu'
                                    : list.fatLevel === '偏胖'
                                    ? 'pianpang'
                                    : list.fatLevel === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.fatLevel || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
        </View>
        <View style="margin-top: -30px; margin-bottom: 20px">
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">体脂率</View>
                    <View>
                        <label class="proportion">{{ list.bodyFatRatio.value || 0 }}%</label>
                        <label
                            :class="
                                list.bodyFatRatio.level === '不足'
                                    ? 'buzu'
                                    : list.bodyFatRatio.level === '优秀'
                                    ? 'youxiu'
                                    : list.bodyFatRatio.level === '偏胖'
                                    ? 'pianpang'
                                    : list.bodyFatRatio.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.bodyFatRatio.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">BMI</View>
                    <View>
                        <label class="proportion">{{ list.bmi.value || 0 }}kg/㎡</label>
                        <label
                            :class="
                                list.bmi.level === '不足'
                                    ? 'buzu'
                                    : list.bmi.level === '优秀'
                                    ? 'youxiu'
                                    : list.bmi.level === '偏胖'
                                    ? 'pianpang'
                                    : list.bmi.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.bmi.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">肌肉量</View>
                    <View>
                        <label class="proportion">{{ list.muscleWeight.value || 0 }}%</label>
                        <label
                            :class="
                                list.muscleWeight.level === '不足'
                                    ? 'buzu'
                                    : list.muscleWeight.level === '优秀'
                                    ? 'youxiu'
                                    : list.muscleWeight.level === '偏胖'
                                    ? 'pianpang'
                                    : list.muscleWeight.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.muscleWeight.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">BMR</View>
                    <View>
                        <label class="proportion">{{ list.bmr.value || 0 }}卡路里</label>
                        <label
                            :class="
                                list.bmr.level === '不足'
                                    ? 'buzu'
                                    : list.bmr.level === '优秀'
                                    ? 'youxiu'
                                    : list.bmr.level === '偏胖'
                                    ? 'pianpang'
                                    : list.bmr.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.bmr.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">骨量</View>
                    <View>
                        <label class="proportion">{{ list.boneWeight.value || 0 }}%</label>
                        <label
                            :class="
                                list.boneWeight.level === '不足'
                                    ? 'buzu'
                                    : list.boneWeight.level === '优秀'
                                    ? 'youxiu'
                                    : list.boneWeight.level === '偏胖'
                                    ? 'pianpang'
                                    : list.boneWeight.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.boneWeight.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">蛋白质</View>
                    <View>
                        <label class="proportion">{{ list.protein.value || 0 }}%</label>
                        <label
                            :class="
                                list.protein.level === '不足'
                                    ? 'buzu'
                                    : list.protein.level === '优秀'
                                    ? 'youxiu'
                                    : list.protein.level === '偏胖'
                                    ? 'pianpang'
                                    : list.protein.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.protein.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">皮下脂肪率</View>
                    <View>
                        <label class="proportion">{{ list.subcutaneousFatRat.value || 0 }}%</label>
                        <label
                            :class="
                                list.subcutaneousFatRat.level === '不足'
                                    ? 'buzu'
                                    : list.subcutaneousFatRat.level === '优秀'
                                    ? 'youxiu'
                                    : list.subcutaneousFatRat.level === '偏胖'
                                    ? 'pianpang'
                                    : list.subcutaneousFatRat.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.subcutaneousFatRat.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">内脏脂肪</View>
                    <View>
                        <label class="proportion">{{ list.visceralFat.value || 0 }}%</label>
                        <label
                            :class="
                                list.visceralFat.level === '不足'
                                    ? 'buzu'
                                    : list.visceralFat.level === '优秀'
                                    ? 'youxiu'
                                    : list.visceralFat.level === '偏胖'
                                    ? 'pianpang'
                                    : list.visceralFat.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.visceralFat.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">体水分率</View>
                    <View>
                        <label class="proportion">{{ list.bodyMoistureContent.value || 0 }}%</label>
                        <label
                            :class="
                                list.bodyMoistureContent.level === '不足'
                                    ? 'buzu'
                                    : list.bodyMoistureContent.level === '优秀'
                                    ? 'youxiu'
                                    : list.bodyMoistureContent.level === '偏胖'
                                    ? 'pianpang'
                                    : list.bodyMoistureContent.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.bodyMoistureContent.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">皮下脂肪率</View>
                    <View>
                        <label class="proportion">{{ list.subcutaneousFatRat.value || 0 }}%</label>
                        <label
                            :class="
                                list.subcutaneousFatRat.level === '不足'
                                    ? 'buzu'
                                    : list.subcutaneousFatRat.level === '优秀'
                                    ? 'youxiu'
                                    : list.subcutaneousFatRat.level === '偏胖'
                                    ? 'pianpang'
                                    : list.subcutaneousFatRat.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.subcutaneousFatRat.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">去脂体重</View>
                    <View>
                        <label class="proportion">{{ list.fatFreeWeight.value || 0 }}%</label>
                        <label
                            :class="
                                list.fatFreeWeight.level === '不足'
                                    ? 'buzu'
                                    : list.fatFreeWeight.level === '优秀'
                                    ? 'youxiu'
                                    : list.fatFreeWeight.level === '偏胖'
                                    ? 'pianpang'
                                    : list.fatFreeWeight.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.fatFreeWeight.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">脂肪量</View>
                    <View>
                        <label class="proportion">{{ list.fatMass.value || 0 }}%</label>
                        <label
                            :class="
                                list.fatMass.level === '不足'
                                    ? 'buzu'
                                    : list.fatMass.level === '优秀'
                                    ? 'youxiu'
                                    : list.fatMass.level === '偏胖'
                                    ? 'pianpang'
                                    : list.fatMass.level === '胖'
                                    ? 'pang'
                                    : 'biaozhun'
                            "
                            >{{ list.fatMass.level || "未知" }}</label
                        >
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">肥胖等级</View>
                    <View>
                        <label class="proportion">{{ list.fatLevel || "未知" }}</label>
                        <label class="placeholder" />
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">身体类型</View>
                    <View>
                        <label class="proportion">{{ list.bodyLevel || "未知" }}</label>
                        <label class="placeholder" />
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">身体年龄</View>
                    <View>
                        <label class="proportion">{{ list.bodyAge || "未知" }}</label>
                        <label class="placeholder" />
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">标准体重</View>
                    <View>
                        <label class="proportion">{{ list.standardWeight || "未知" }}</label>
                        <label class="placeholder" />
                    </View>
                </View>
            </View>
            <View class="listItem">
                <View class="listItemTitle">
                    <View class="heightFirst_left">心率</View>
                    <View>
                        <label class="proportion">{{ list.heartRate || "未知" }}</label>
                        <label class="placeholder" />
                    </View>
                </View>
            </View>
        </View>
        <home-share-report v-show="show" @close="onChangeShow" :data="list" />
    </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
export default {
    data() {
        return {
            statusBarHeight: statusBarHeight,
            list: {},
            show: false,
        };
    },
    methods: {
        moveHandle() {
            return false;
        },
        async getDetail(e) {
            const { data } = await this.request.httpTokenRequest(`/mp-api/wx/weight/healthReport/${e.id}`, "GET");
            this.list = data || {};
        },
        goBack() {
            uni.navigateBack({ delta: 1 });
        },
        onChangeShow(bool) {
            this.show = bool;
        },
    },
    onLoad(options) {
        this.getDetail(options);
    },
};
</script>

<style lang="scss" scoped>
uni-page-page,
.integral {
    height: 100%;
    background-color: #ffffff;
}

.search_top_back {
    background-image: url(https://admin.ximusen.cn/profile/upload/ximusen_mini_app_img/healthReport.png);
    height: 548rpx;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.report_title {
    margin-top: 110rpx;
    padding-left: 40rpx;
    display: flex;
    flex-direction: row;
}
.change {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
}
.status_text {
    font-size: 22rpx;
    color: #fff;
    min-width: 66rpx;
    height: 36rpx;
    line-height: 36rpx;
    background-image: url("@/static/img/homeuserdata/user_data_qipao.png");

    background-size: cover;
    text-align: center;
    padding-left: 3px;
}
.report_left {
    display: flex;
    flex: 1;
}
.report_right {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
}
.label_left {
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
}
.label_right {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
}
.wightNum {
    margin-top: 40rpx;
    padding-left: 40rpx;
    label {
        height: 62px;
        font-size: 44px;
        font-weight: 600;
        color: #009977;
        line-height: 62px;
    }
}
.weightCom {
    position: relative;
    top: -30px;
    background: #ffffff;
    border-radius: 20px 20px 0px 0px;
    padding-top: 40rpx;
}
.lines {
    width: 6rpx;
    height: 28rpx;
    background: #009977;
    border-radius: 0px 98px 98px 0px;
    margin-right: 36rpx;
}
.weightCenter {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.heightFirst {
    display: flex;
    flex: 1;
    flex-direction: row;
    padding-right: 30rpx;
}
.heightFirst_left {
    display: flex;
    flex: 1;
    align-items: center;
}
.listItem {
    padding-left: 42rpx;
    padding-right: 30rpx;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    background: #ffffff;
}
.listItemTitle {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    padding-top: 32rpx;
    padding-bottom: 32rpx;
}
.textNum {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
}
.textSix {
    font-size: 24px;

    font-weight: 600;
    color: #009977;
    line-height: 33px;
}
.textChnage {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
}
.proportion {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
    margin-right: 60rpx;
}

.buzu {
    width: 53px;
    height: 22px;
    background: rgba(255, 130, 46, 0.06);
    border-radius: 11px;
    border: 1px solid #ff822e;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #ff822e;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
.biaozhun {
    width: 53px;
    height: 22px;
    background: rgba(0, 153, 119, 0.06);
    border-radius: 11px;
    border: 1px solid rgba(0, 153, 119, 0.2);
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #009977;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
.youxiu {
    width: 53px;
    height: 22px;
    background: #009977;
    border-radius: 11px;
    border: 1px solid #009977;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
.pianpang {
    width: 53px;
    height: 22px;
    background: rgba(255, 65, 59, 0.06);
    border-radius: 11px;
    border: 1px solid #ff413b;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #ff413b;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
.pang {
    width: 53px;
    height: 22px;
    background: #ff413b;
    border-radius: 11px;
    border: 1px solid #ff413b;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
.placeholder {
    width: 53px;
    height: 22px;
    display: inline-block;
}
</style>
